/**
 * @description ListItem 列表项组件
 * @author Shawn
 */

import { View } from "@tarojs/components";
import cssModule from './index.module.scss';
import { AtIcon } from "taro-ui";
import { ReactNode } from "react";

// 组件接收的参数
interface ListViewItemProps {
  title: string; // 标题
  rightText?: string; // 右侧文本
  onRightClick?: () => void; // 右侧点击事件
  children?: ReactNode
}

export default function ListViewItem({ title, rightText, onRightClick, children }: ListViewItemProps) {


  return (
    <View className={cssModule.container} onClick={onRightClick}>
      <View className={cssModule.title}>{title}</View>
      <View className={cssModule.right}>
        {children ? children : rightText && <View className={cssModule.rightText}>{rightText}</View>}
        <AtIcon value='chevron-right' size='18' color='#86909C'></AtIcon>
      </View>
    </View>
  );
}
